<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyunlong
 * @LastEditTime: 2022-01-08 09:37:03
-->
<template>
  <div ref="bottom3_container" style="height: 95%"></div>
</template>
<script>
import {get} from "../../../utils/request"
import {Pie} from "@antv/g2plot"
export default {
  data(){
    return{
     dataArr:[]
    }
  },
  mounted(){
   this.initData();
  },
  methods:{
    initData(){
      let url = '/dashboard/queryDeviceOnlineNumber'
      get(url).then(res=>{
        this.dataArr=res.data;
        this.initChat();
      })
    },
   initChat(){
     const pie = new Pie(this.$refs.bottom3_container,{
        appendPadding: 10,
        data:this.dataArr,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        interactions: [{ type: "element-active" }],
     })
     pie.render();
   }
  },
}
</script>
<style scoped>

</style>